---
sort: '0008'
title: 'NextJS Guide'
---

# NextJS Guide

## Installation

With NextJS there're several ways on how to add Jitsu tracking

## Client Side Tracking

First, create or update your `_app.js` following this code
```jsx
import { createClient, JitsuProvider } from "@jitsu/nextjs";

// initialize Jitsu client
const jitsuClient = createClient({
  tracking_host: "__JITSU_HOST__",
  key: "__API_KET__",
  // See Jitsu SDK parameters section for more options
});

// wrap our app with Jitsu provider
function MyApp({Component, pageProps}) {
  return <JitsuProvider client={jitsuClient}>
    <Component {...pageProps} />
  </JitsuProvider>
}

export default MyApp
```
See [parameters list](/docs/sending-data/js-sdk/parameters-reference) for `createClient()` call.

After jitsu client and provider are configured you will be able to use `useJitsu` hook in your components
```jsx
import { useJitsu } from "@jitsu/nextjs";

const Main = () => {
  const {id, trackPageView, track} = useJitsu(); // import methods from useJitsu hook

  useEffect(() => {
    id({id: '__USER_ID__', email: '__USER_EMAIL__'}); // identify current user for all events
    trackPageView() // send pageview event
  }, [])

  const onClick = (btnName) => {
    track('btn_click', {btn: btnName}); // send btn_click event with button name payload on click
  }

  return (
    <button onClick="() => onClick('test_btn')">Test button</button>
  )
}
```
Please note, that `useJitsu` uses `useEffect()` with related side effects.

\
To enable automatic pageview tracking, add `usePageView()` hook to your `_app.js`. This hook will send pageview each time
user loads a new page. This hook relies on [NextJS Router](https://nextjs.org/docs/api-reference/next/router)
```jsx
import { createClient, JitsuProvider } from "@jitsu/nextjs";

// initialize Jitsu client
const jitsuClient = createClient({
  tracking_host: "__JITSU_HOST__",
  key: "__API_KET__",
  // See Jitsu SDK parameters section for more options
});

function MyApp({Component, pageProps}) {
  usePageView(jitsuClient); // this hook will send pageview track event on router change

  // wrap our app with Jitsu provider
  return <JitsuProvider client={jitsuClient}>
    <Component {...pageProps} />
  </JitsuProvider>
}

export default MyApp
```
If you need to pre-configure jitsu event - for example, identify a user, it's possible to do via `before` callback:
```javascript
usePageView(jitsuClient, {before: (jitsu) => jitsu.id({id: '__USER_ID__', email: '__USER_EMAIL__'})})
```

## Server Side Tracking

Jitsu can track events on server-side:
* **Pros:** this method is 100% reliable and ad-block resistant
* **Cons:** static rendering will not be possible; `next export` will not work; fewer data points will be collected - attributes such as screen-size, device

### Manual tracking

For manual tracking you need to initialize Jitsu client
```javascript
import { createClient } from "@jitsu/nextjs";

// initialize Jitsu client
const jitsuClient = createClient({
  tracking_host: "__JITSU_HOST__",
  key: "__API_KET__",
  // See Jitsu SDK parameters section for more options
});
```
after that, you will be able to user [Jitsu client](/docs/sending-data/js-sdk/methods-reference), for example, in `getServerSideProps`
```
export async function getServerSideProps() {
  jitsu.track("page_view", {page: req.page})

  return { props: {} }
}
```

### Automated page view tracking

Jitsu could track page views automatically via use of `_middleware.js` which has been introduced in NextJS 12

```javascript
import { createClient, middlewareEnv } from "@jitsu/nextjs";
import { NextResponse } from "next/server";

const jitsu = createClient({
  tracking_host: "__JITSU_HOST__",
  key: "__API_KET__"
})

export function middleware(req, ev) {
  let res = NextResponse.next()
  if (!req?.page?.name) {
    return;
  }
  jitsu.track("pageview", { env: middlewareEnv(req, res) })
  return res
}
```

## Jitsu SDK parameters and methods

Read about all SDK parameters and methods in our [documentation](/docs/sending-data/js-sdk):

* [Parameters](/docs/sending-data/js-sdk/parameters-reference) - parameters reference for `createClient()` call
* [Methods](/docs/sending-data/js-sdk/methods-reference) - all these methods can be called on a return value of `useJitsu()`

## Example app

You can find example app [here](https://github.com/jitsucom/jitsu-js/tree/master/examples/nextjs-app).